<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <input type="button" value="发送验证码" id="sendCode">
    <script>
        // call、apply、bind是ES5中在函数调用时候限定（修改）函数中this的指向
        // call和apply调用时指定的函数会立即执行
        // bind为指定函数设定this后，会返回一个改变了this的新函数
        // bind(调用者,参数)

        function show(){
            console.log(this);
        }
        var user={
            name:"tom"
        };
        var fun=show.bind(user);
        fun();
        let timer;
        let btn=document.getElementById("sendCode");
        //为按钮绑定一个点击事件

        
        btn.onclick=function(){
            var objs={
                s:20
            };
            // timer=setInterval(function(){
            //     setTime(objs);//实际参数
            // },1000);
            // timer=setInterval(setTime,100,objs);
            timer=setInterval(setTime.bind(btn),100,objs);//通过bind去改变了this的指向，让this指向当前按钮
        };
        function setTime(obj){//传递一个对象
            if(obj.s<0){
                clearInterval(timer);
                // btn.disabled=false;//开启按钮
                // btn.value=`发送验证码`;
                this.disabled=false;//开启按钮
                this.value=`发送验证码`;
            }else{
                // btn.disabled=true;//禁用按钮
                // btn.value=`${obj.s}秒后重发`;
                this.disabled=true;//禁用按钮
                this.value=`${obj.s}秒后重发`;
                obj.s--;
            }
          
        }
        
    </script>
</body>
</html>